<template>
	<view>
		<!-- 轮播 -->
		<view class="lb-banner">
			<u-swiper height="360rpx" radius="0" :circular="true" :list="bannerData" keyName="image"></u-swiper>
		</view>

		<!-- main -->
		<!-- margin-top: -62rpx; -->
		<view class="lb-main-32" style="position: relative;">
			<!-- 菜单 -->
			<view class="lb-grid-5">
				<view class="grid-item" v-for="(item,index) in menuData" :key="index"
					@click="goTo('/pages/xmy/goods-list/goods-list?id=' + item.id)">
					<view class="item-icon">
						<image :src="getImgUrl(item.icon_image)" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 优惠券 -->
			<view class="lb-coupon" @click="goTo('/pages/xi-hu/coupon/coupon?type=3')">
				<image :src="youhui_bg?youhui_bg:'/static/xi-hu/img/coupon.png'" mode=""></image>
			</view>

			<view style="margin-top: 30rpx;">
				<view class="lb-ad" v-for="(item,index) in listData" :key="index">
					<view class="ad-img" @click="goTo('/pages/xmy/goods-detail/goods-detail?id=' + item.id)">
						<image :src="getImgUrl(item.cover_image)" mode="aspectFill"></image>
					</view>
					<view class="ad-info" @click="goTo('/pages/xmy/goods-detail/goods-detail?id=' + item.id)">
						<view class="ad-name u-line-2">
							{{item.name}}
						</view>
						<view class="ad-price">
							<view class="left">{{item.a_price || item.price || 0}}</view>
							<!-- <view class="right" v-if="item.amount > 1">任洗{{item.amount}}件</view> -->
						</view>
						<view class="vip-price" v-if="item.v_price && item.v_price > 0">
							<image src="/static/icon/vip-zx.png" mode=""></image>
							<text>￥{{item.v_price || ''}}</text>
						</view>
						<view class="ad-btn">
							热门商品
						</view>
						<view class="ad-icon">
							<image src="/static/icon/8.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		xmyIndex,
		xmyGoodsList
	} from "@/api/apis/wash.js"
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				current: 0,
				bannerData: [],
				//菜单
				menuData: [],
				couponData: [],
				classData: [],
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				youhui_bg: ''
			}
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				// this.getList();
			}
		},
		methods: {
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
				return
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			getHome() {
				xmyIndex().then(res => {
					if (res.code == 1) {
						//banner
						this.bannerData = res.data.banner;
						this.bannerData.forEach((val, key) => {
							val.image = setImgUrl(val.image);
						});

						this.menuData = res.data.category;
						this.menuData.forEach((val, key) => {
							val.icon_image = setImgUrl(val.icon_image);
						});
						this.youhui_bg = setImgUrl(res.data.youhui_bg)
						this.listData = res.data.goods
						console.log(this.listData)
					}
				})
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				xmyGoodsList({
					// is_recommend: 1,
					page: this.page,
					limit: this.limit,
				}).then(res => {
					uni.hideLoading();
					if (this.page == 1) {
						this.listData = res.data;
					} else {
						this.listData = this.listData.concat(res.data);
					}
					if (res.data.length != 0 && res.data.length == this.limit) {
						console.log(res.data.length)
						//请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
						this.isLoading = false;
						this.page++;
					}
				})
			},
		},
		onLoad() {
			this.getHome();
			// this.getList();
		}
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	//菜单
	.lb-grid-5 {
		width: 100%;
		height: 174rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 16rpx;

		display: grid;
		grid-template-columns: repeat(5, 1fr);

		.grid-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.item-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.item-label {
				font-size: $main-font-24;
				color: $main-font-color;
				margin-top: 12rpx;
			}
		}
	}

	//优惠券
	.lb-coupon {
		width: 100%;
		height: 174rpx;
		margin-top: 36rpx;
	}

	//其他卷：抖音、美团
	.lb-grid-2 {
		margin-top: 32rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 18rpx;

		.grid2-item {
			height: 186rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;

			background-size: 100% 100%;
			background-position: 100% 100%;


			.g2-lable {
				font-size: $main-font-28;
				font-weight: bold;
				color: $main-font-color;
			}

			.g2-icon {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}

	// 分类
	.lb-box {
		margin-top: 28rpx;
		width: 100%;
		height: 216rpx;
		background: rgba(239, 250, 251, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;

		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		position: relative;

		.lb-line-box {
			position: absolute;
			width: 100%;
			height: 216rpx;
			border-radius: 16rpx;

			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
		}



		.box-item {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			.name {
				font-size: $main-font-28;
				font-weight: bold;
				color: $main-font-color;
				padding: 6rpx 0 16rpx;
			}

			.tip {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					font-size: $main-font-20;
					font-weight: 400;
					color: $main-font-color-grey6;
				}
			}
		}

	}

	.lb-ad {
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 24rpx;

		.ad-img {
			width: 456rpx;
			height: 300rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;

			}
		}

		.ad-info {
			width: calc(100% - 456rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding: 24rpx;

			.ad-name {
				font-size: $main-font-24;
				font-weight: bold;
				color: $main-font-color-grey6;
			}

			.ad-price {
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {

					font-size: $main-font-36;
					font-weight: bold;
					color: #2F2D2E;

					&::before {
						content: '¥';
						font-size: $main-font-20;
					}

				}


				.right {
					font-size: $main-font-18;
					font-weight: 400;
					color: $main-font-color-grey6;
					padding-left: 12rpx;
				}
			}

			.vip-price {
				display: flex;
				flex-direction: row;
				// padding-left: 12px;

				image {
					width: 92rpx;
					height: 36rpx;
				}

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: #7C562D;
					padding-left: 6rpx;
				}
			}

			.ad-btn {
				border: 2rpx solid #F67F7D;
				background: linear-gradient(131deg, #F7583F 0%, #F28F4C 100%);
				border-radius: 16rpx;
				font-size: $main-font-18;
				font-weight: 400;
				color: $main-font-color-white;
				width: 96rpx;
				height: 30rpx;
				line-height: 28rpx;
				text-align: center;
			}

			.ad-icon {
				width: 73rpx;
				height: 14rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}


	// 商品
	.lb-goods-grid-2 {
		margin-top: 32rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 30rpx;

		.lb-goods {
			height: 344rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx;

			.goods-img {
				height: 200rpx;
				border-radius: 16rpx 16rpx 0 0;

				image {
					border-radius: 16rpx 16rpx 0 0;
				}
			}

			.goods-info {
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;

				.name {
					font-size: $main-font-28;
					font-weight: bold;
					line-height: 40rpx;
					color: $main-font-color;
					padding-bottom: 12rpx;
				}

				.price {

					.text {
						font-size: $main-font-36;
						font-weight: bold;
						color: #F65D40;

						&::before {
							content: '¥';
							font-size: $main-font-20;
							font-weight: 400;
						}
					}

					.tip {
						font-size: $main-font-18;
						font-weight: 400;
						color: $main-font-color-grey6;
						padding-left: 12rpx;
					}
				}
			}
		}
	}
</style>